import React, { useState } from 'react';
import { Calendar, MapPin, Users, TrendingUp, ChevronLeft, Search, Filter } from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { useNavigate } from 'react-router-dom';
import MonthPicker from './MonthPicker';

interface Album {
  id: number;
  title: string;
  teamName: string;
  location: string;
  date: string;
  views: number;
  imageUrl: string;
  participants: number;
}

const springThunderAlbums: Album[] = [
  {
    id: 1,
    title: '20240506北京团队春雷行动',
    teamName: '北京团队',
    location: '北京市朝阳区',
    date: '2024.05.06',
    views: 36544,
    imageUrl: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&q=80&w=500',
    participants: 125
  },
  {
    id: 2,
    title: '20240503上海团队春雷行动',
    teamName: '上海团队',
    location: '上海市浦东新区',
    date: '2024.05.03',
    views: 28766,
    imageUrl: 'https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&q=80&w=500',
    participants: 98
  },
  {
    id: 3,
    title: '20240428广州团队春雷行动',
    teamName: '广州团队',
    location: '广州市天河区',
    date: '2024.04.28',
    views: 31254,
    imageUrl: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&q=80&w=500',
    participants: 156
  }
];

const locations = ['全部地区', '北京', '上海', '广州', '深圳', '杭州'];
const teams = ['全部团队', '北京团队', '上海团队', '广州团队', '深圳团队'];

export default function CategoryPage() {
  const navigate = useNavigate();
  const [showMonthPicker, setShowMonthPicker] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [selectedLocation, setSelectedLocation] = useState('全部地区');
  const [selectedTeam, setSelectedTeam] = useState('全部团队');
  const [sortByViews, setSortByViews] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [displayAlbums, setDisplayAlbums] = useState(springThunderAlbums);

  const handleMonthSelect = (date: Date) => {
    setSelectedDate(date);
    setShowMonthPicker(false);
    // 实际项目中这里需要根据选择的月份筛选数据
  };

  const handleSort = () => {
    setSortByViews(!sortByViews);
    const sorted = [...displayAlbums].sort((a, b) => 
      sortByViews ? a.views - b.views : b.views - a.views
    );
    setDisplayAlbums(sorted);
  };

  const filterAlbums = () => {
    let filtered = [...springThunderAlbums];
    
    if (selectedLocation !== '全部地区') {
      filtered = filtered.filter(album => album.location.includes(selectedLocation));
    }
    
    if (selectedTeam !== '全部团队') {
      filtered = filtered.filter(album => album.teamName === selectedTeam);
    }
    
    if (searchTerm) {
      filtered = filtered.filter(album => 
        album.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        album.location.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }
    
    setDisplayAlbums(filtered);
    setShowFilters(false);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部导航 */}
      <div className="bg-white px-4 py-3 flex items-center border-b sticky top-0 z-20">
        <button onClick={() => navigate('/')} className="mr-4">
          <ChevronLeft className="w-6 h-6 text-gray-600" />
        </button>
        <h1 className="text-xl font-semibold">春雷行动</h1>
      </div>

      {/* 搜索和筛选栏 */}
      <div className="bg-white px-4 py-3 border-b sticky top-14 z-10">
        <div className="flex items-center space-x-3">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="搜索活动名称、地点..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-gray-50 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <button
            onClick={() => setShowFilters(!showFilters)}
            className={`p-2 rounded-full ${showFilters ? 'bg-blue-500 text-white' : 'bg-gray-50 text-gray-600'}`}
          >
            <Filter className="w-5 h-5" />
          </button>
        </div>

        {/* 展开的筛选面板 */}
        {showFilters && (
          <div className="mt-4 space-y-4 animate-in slide-in-from-top">
            {/* 时间和排序 */}
            <div className="flex justify-between items-center">
              <button
                onClick={() => setShowMonthPicker(true)}
                className="flex items-center space-x-2 px-4 py-2 bg-gray-50 rounded-full"
              >
                <Calendar className="w-5 h-5 text-blue-500" />
                <span>{format(selectedDate, 'yyyy年MM月', { locale: zhCN })}</span>
              </button>
              <button
                onClick={handleSort}
                className="flex items-center space-x-2 px-4 py-2 bg-gray-50 rounded-full"
              >
                <TrendingUp className="w-5 h-5 text-blue-500" />
                <span>热度{sortByViews ? '↓' : '↑'}</span>
              </button>
            </div>

            {/* 地区选择 */}
            <div className="flex overflow-x-auto py-2 -mx-4 px-4 space-x-2 no-scrollbar">
              {locations.map((location) => (
                <button
                  key={location}
                  onClick={() => setSelectedLocation(location)}
                  className={`flex items-center px-4 py-2 rounded-full whitespace-nowrap ${
                    selectedLocation === location
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-50 text-gray-600'
                  }`}
                >
                  <MapPin className="w-4 h-4 mr-1" />
                  {location}
                </button>
              ))}
            </div>

            {/* 团队选择 */}
            <div className="flex overflow-x-auto py-2 -mx-4 px-4 space-x-2 no-scrollbar">
              {teams.map((team) => (
                <button
                  key={team}
                  onClick={() => setSelectedTeam(team)}
                  className={`flex items-center px-4 py-2 rounded-full whitespace-nowrap ${
                    selectedTeam === team
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-50 text-gray-600'
                  }`}
                >
                  <Users className="w-4 h-4 mr-1" />
                  {team}
                </button>
              ))}
            </div>

            {/* 确认按钮 */}
            <button
              onClick={filterAlbums}
              className="w-full py-2 bg-blue-500 text-white rounded-full font-medium hover:bg-blue-600 transition-colors"
            >
              应用筛选
            </button>
          </div>
        )}
      </div>

      {/* 相册列表 */}
      <div className="p-4 space-y-4">
        {displayAlbums.map((album) => (
          <div
            key={album.id}
            onClick={() => navigate(`/detail/${album.id}`)}
            className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer group"
          >
            <div className="relative">
              <img
                src={album.imageUrl}
                alt={album.title}
                className="w-full h-48 object-cover transform group-hover:scale-105 transition-transform duration-300"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
              <div className="absolute top-4 left-4">
                <span className="px-3 py-1.5 bg-blue-500 text-white text-sm font-medium rounded-full shadow-lg">
                  春雷行动
                </span>
              </div>
              <div className="absolute top-4 right-4 flex items-center space-x-2">
                <span className="px-3 py-1.5 bg-black/30 backdrop-blur-sm text-white text-sm rounded-full flex items-center shadow-lg">
                  <Users className="w-4 h-4 mr-1" />
                  {album.participants}
                </span>
                <span className="px-3 py-1.5 bg-black/30 backdrop-blur-sm text-white text-sm rounded-full shadow-lg">
                  {album.views.toLocaleString()} 浏览
                </span>
              </div>
            </div>
            <div className="p-4">
              <h3 className="text-lg font-medium text-gray-900 mb-2">{album.title}</h3>
              <div className="flex items-center justify-between text-sm text-gray-500">
                <div className="flex items-center">
                  <MapPin className="w-4 h-4 mr-1" />
                  {album.location}
                </div>
                <span>{album.date}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 月份选择器 */}
      {showMonthPicker && (
        <MonthPicker
          selectedDate={selectedDate}
          onSelect={handleMonthSelect}
          onClose={() => setShowMonthPicker(false)}
        />
      )}
    </div>
  );
}